<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件通信-父传子</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="box">
        <!-- 父传子-props -->
        <!-- myshow控制首页显示 -->
        <navbar myname="home" :myshow="false"></navbar>
        <navbar myname="list" :myshow="true"></navbar>
        <navbar :myname="parentName" :myshow="true"></navbar>
    </div>

    <script>
        //全局组件--对于vue实例根组件来说，这个组件为子组件
        Vue.component("navbar", {
            template: `<div>
                <button>返回</button>
                navbar--{{myname}}
                <button v-show="myshow">首页</button><br>
                </div>`,
            data() {
                return {
                    childName: "子组件状态"
                }
            },
            methods: {

            },
            props: ["myname", "myshow"]
            //属性验证
            //Number,String,Boolen,Array,Object,function,null(不限制类型)
            // props: {
            //     myname: string,
            //     myshow: Boolean
            // }
        })
        new Vue({
            el: "#box",
            data: {
                parentName: "父组件的状态"
            },
            methods: {

            }
        })
    </script>
</body>

</html>